<template>
<div>
  <div>游戏：{{ game }}</div>
  <div>游戏1：{{ game1}}</div>
  <div>地址：{{ place }}</div>
  <div>地址1：{{ place1 }}</div>
  <button @click="changeGame">修改游戏</button>
  <button @click="changeGame1">修改游戏1</button>
  <button @click="changeLocation">修改location</button>
  <button @click="changeD">修改d</button>
  <button @click="changePlace">修改place</button>
<button @click="changePlace1">修改place1</button>
</div>
</template>

<script lang='ts' setup name='App'>
import {ref, reactive,readonly,shallowReadonly} from "vue"
// 数据
let game=ref("原神")
// readonly不可以修改声明的元素，game1会随着game的变化而变化，但game1不能被修改
// shallowReadonly(只限制浅层次的)不可以修改声明的元素，game1会随着game的变化而变化，但game1不能被修改
let game1=readonly(game)
let place=ref({
  location:"南京",
  area:{
    aa:"溧水区",
    b:{
      c:"石湫镇",
      d:"南京工业大学浦江学院"
    }
  }
})
let place1=shallowReadonly(place)

// 方法
function changeGame(){
game.value="我的世界"
}
function changeGame1(){
game1.value="王者"
}

function changeLocation(){
  place.value.location="栖霞区"
}
function changeD(){
  place.value.area.b.d="江苏第二师范"
}
function changePlace(){
  place.value={ 
  location:"宁波",
  area:{
    aa:"鄞州区",
    b:{
      c:"石湫镇",
      d:"南京工业大学浦江学院"
    }
  }}
}
function changePlace1(){
  place1.value={ 
  location:"kdkdkklg",
  area:{
    aa:"鄞州区",
    b:{
      c:"石湫镇",
      d:"南京工业大学浦江学院"
    }
  }}

}
</script>

<style scoped>

</style>